<template>
  <div class="login-container">
    <div class="login-box">
      <h1 class="login-title text-center text-2xl mb-6"  style="margin-left:140px;margin-top: -15px;">用户登录</h1>
      <el-form :model="loginForm" :rules="rules" ref="loginFormRef" label-width="80px" class="login-form">
        <el-form-item label="用户名" prop="username">
          <el-input placeholder="请输入用户名" v-model="loginForm.username"></el-input>
        </el-form-item>
        <el-form-item label="密码" prop="password">
          <el-input placeholder="请输入密码" v-model="loginForm.password" show-password type="password"></el-input>
        </el-form-item>
        <el-form-item class="flex justify-between items-center">
          <el-button type="primary" @click="handleLogin"> 
           <el-icon><Tools /></el-icon>
            登录 </el-button>
          <el-button type="success" @click="handleRegister">
            <el-icon><UserFilled /></el-icon>
            注册
          </el-button>
          <p style="text-align: right; cursor: pointer;margin-left: 20px;" @click="handleForgotPassword">
            忘记密码？
          </p>
        </el-form-item>
      </el-form>
      <div class="selector-container flex justify-center mt-6">
        <el-radio-group  style="margin-left: 30%;" v-model="selectedOption" @change="handleOptionChange">
          <el-radio label="page1">用户</el-radio>
          <el-radio label="page2">管理员</el-radio>
        </el-radio-group>
      </div>
    </div>
  </div>
</template>
<script setup>
import { UserFilled,Tools } from '@element-plus/icons-vue';
import { ref, reactive } from 'vue';
import { ElForm, ElFormItem, ElInput, ElButton, ElMessageBox } from 'element-plus';
import { useRouter } from 'vue-router'; // 引入 useRouter
import axios from 'axios'; // 引入 axios

const router = useRouter(); // 使用 useRouter 获取路由器实例
const selectedOption = ref('');

const handleOptionChange = (value) => {
  if (value === 'page1') {
    router.push('/ReGister'); // 跳转到用户页面
  } else if (value === 'page2') {
    router.push('/GuanLogin'); // 跳转到管理员页面
  }
};
const loginFormRef = ref(null);
const loginForm = reactive({
  username: '',
  password: ''
});

const rules = {
  username: [
    { required: true, message: '请输入用户名', trigger: 'blur' }
  ],
  password: [
    { required: true, message: '请输入密码', trigger: 'blur' }
  ]
};

// 登录逻辑
const handleLogin = () => {
  loginFormRef.value.validate(async (valid) => {
    if (valid) {
      try {
        const response = await axios.post('http://localhost:8091/user/login', {
          username: loginForm.username,
          password: loginForm.password
        });
        if (response.data.code==200) {
          alert('登录成功');
          router.push({ path: '/user-page' }); // 跳转到用户系统首页面
        } else {
          alert('用户名或密码错误');
        }
      } catch (error) {
        console.error('登录失败:', error);
        alert('登录失败，请检查网络或联系管理员');
      }
    } else {
      console.log('表单验证失败');
    }
  });
};

// 注册跳转逻辑
const handleRegister = () => {
  router.push({ path: '/register' }); // 跳转到注册页面
};

// 忘记密码逻辑
const handleForgotPassword = () => {
  ElMessageBox.prompt('请输入您的邮箱地址', '找回密码', {
    inputPattern: /\S+@\S+\.\S+/,
    inputErrorMessage: '邮箱格式不正确',
    confirmButtonText: '确认',
    cancelButtonText: '取消'
  }).then(({ value }) => {
    console.log('用户输入的邮箱:', value);
    alert(`重置密码链接已发送至 ${value}`);
  }).catch(() => {
    console.log('用户取消了操作');
  });
};
</script>

<style scoped>
/* 定义动画 */
@keyframes borderAnim {
  0% { border-color: rgba(213, 143, 155, 0.982); }
  25% { border-color: rgba(245, 245, 191, 0.957); }
  50% { border-color: rgba(203, 203, 255, 0.959); }
  75% { border-color: rgba(196, 251, 196, 0.92); }
  100% { border-color: rgb(165, 211, 229); }
}
.el-input__wrapper {
  border-radius: 30px !important;
}
.login-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  width: 100%;
  background-image: url('@/assets/背景.png'); 
  background-size: cover; /* 让图片覆盖整个背景 */
  background-position: center; /* 让图片居中 */
  background-repeat: no-repeat; /* 防止图片重复 */
}
.login-box {
  border: 2px solid pink;
  animation: borderAnim 4s infinite;
  padding: 2rem;
  box-shadow: 0 5px 7px rgba(225, 228, 228, 0.852);
  width: min(90%, 400px);
  border-radius: 20px;
  margin-left: 40%;
  background-color: rgb(230, 240, 250);
}

.login-title {
  margin-bottom: 20px;
}

.login-form {
  padding: 20px;
}

/* 忘记密码样式 */
.login-form p {
  color: #409eff; /* Element Plus 的蓝色 */
  cursor: pointer;
  text-decoration: underline;
}
</style>